<template>
  <div class="user-dynamic-list">
    <ul :ref="setFollowHeaderRef" :style="{ transform: `translateY(${swipeY}px)` }">
      <li v-for="item, index in currentVideo" :key="item.userId">
        <div class="follow-item">
          <!-- 头像昵称 -->
          <div class="follow-item-avatarNickname">
            <img :src="'http://43.138.15.137:3000' + item.Video.userAvatar" alt="">
            <div class="follow-item-nickname">@{{ item.Video.userNickname }}</div>
          </div>
          <!-- 作品文案 -->
          <div class="follow-item-work">
            <p>{{ item.Video.videoDesc }}</p>
          </div>
          <!-- 视频播放 -->
          <div class="follow-item-video">
            <video class="video-player" playsinline webkit-playsinline :ref="(el) => setVideoRef(el, index)"
              @click="toggleVideoPlay(index)">
              <source :src="item.Video.videoPath" type="video/mp4">
            </video>
          </div>
          <!-- 互动按钮 -->
          <div class="follow-item-btn">
            <span>
              <i class="iconfont icon-aixin1" @click="likeVideo(item.Video.videoId, currentVideo, 'Video')"
                :class="{ 'like-btn-active': item.isLiked }"></i>
              <p>{{ item.WSLCNum.likeNum }}</p>
            </span>
            <span>
              <i class="iconfont icon-pinglun"></i>
              <p>{{ item.WSLCNum.commentNum }}</p>
            </span>
            <span>
              <i class="iconfont icon-a-huaban1fuben37"></i>
              <p>{{ item.WSLCNum.shareNum }}</p>
            </span>
          </div>
          <!-- 时间 -->
          <div class="follow-item-time">2023-01-01</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import { useVideoPlayer } from "@/hooks/useVideoPlayer";
import { useVideoInteractions } from '@/hooks/useVideoInteractions';
import { useTemplateRef } from "@/hooks/useTemplateRef";
import { useFingerSwipe } from "@/hooks/useFingerSwipe";

// 接收父组件的视频列表
const props = defineProps({
  currentVideo: {
    type: Array,
    required: true
  }
});

// 视频播放逻辑
const { videoRefs, setVideoRef, toggleVideoPlay, pauseAllVideos } = useVideoPlayer();

// 点赞逻辑
const { likeVideo } = useVideoInteractions();

// ul容器的ref（用于滑动计算）
const { templateRef: followHeaderRef, setTemplateRef: setFollowHeaderRef } = useTemplateRef();

// 滑动偏移量
const swipeY = ref(0);
const maxY = ref(0);

// 计算滑动边界（ul高度 - 容器高度）
const calculateSwipeBounds = async () => {
  await nextTick();
  const ulEl = followHeaderRef.value;
  const containerEl = followHeaderRef.value.parentElement;
  maxY.value = ulEl.offsetHeight - containerEl.offsetHeight;
};

// 初始化滑动交互
const initSwipe = () => {
  const { y } = useFingerSwipe(followHeaderRef.value, {
    minY: -maxY.value,
    maxY: 0,
  });
  watch(y, (newY) => {
    swipeY.value = newY;
  });
};

// 组件挂载 & 列表变化时重新计算滑动边界
onMounted(() => {
  calculateSwipeBounds();
  initSwipe();
});

watch(() => props.currentVideo.length, async () => {
  await nextTick();
  calculateSwipeBounds();
  initSwipe();
});
</script>

<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.user-dynamic-list {
  width: 10rem;

  ul {
    @include flex-center;
    flex-direction: column;

    li {
      width: 9.4rem;
      padding: 0 .3rem;
      background-color: #161622;
      border-bottom: .05rem solid #252533;

      .follow-item-avatarNickname {
        width: 100%;
        height: .88rem;
        display: flex;
        align-items: center;
        margin-top: .2667rem;

        img {
          width: .8rem;
          height: .8rem;
          border-radius: 50%;
        }

        .follow-item-nickname {
          font-size: .3733rem;
          color: $color-white;
          margin-left: .1333rem;
        }
      }

      .follow-item-work {
        font-size: 14px;
        margin: 10px 0;
        color: #e8e8e9;
      }

      .follow-item-video {
        width: 6.64rem;
        height: 10.6667rem;
        background-color: #000;

        video {
          width: 100%;
          height: 100%;
        }
      }

      .follow-item-btn {
        width: 4.8rem;
        height: .6933rem;
        display: flex;
        justify-content: space-between;
        margin-top: .2667rem;
        color: #d5d5d5;

        span {
          display: flex;
          align-items: center;

          i {
            font-size: .6rem;
            transition: all .3s ease-in-out;
          }

          p {
            font-size: .4267rem;
            margin-left: .0667rem;
          }
        }
      }

      .follow-item-time {
        font-size: .2667rem;
        margin-bottom: .2667rem;
        color: #8b8c96;
        margin-top: .2667rem;
      }
    }
  }
}

.like-btn-active {
  color: $color-red;
  transition: all .3s ease-in-out;
}
</style>